new Vue({
  el: '#newsCotainer',
  data: {
    newsList: [],
    newsListResault:[],
    newsTopList:[],
    otherList:[],
    runner: null,
    imgRunner: [],
    runnerIndex: 0,
    runnerSwitch:true,
    area:getUrlParams().area||0,
    oldArea:getUrlParams().area||0,
    areaList:["日本","国产","欧美"],
    page:1,
    pArr:[],
  },

  methods: {
    // 读取数据
    readFile() {
      this.$http.get('./moongoDB/news').then(response => {
        let res = response.body;
        if (res) {
          this.newsList = res;

          // 定时器和一些监听
          this.myRunner(4000);
          this.runnerhover();
          this.areahover();

          // 默认渲染
          this.filterArea();
          this.readNumSort();
        }
      }, response => {
        console.log('请求数据失败！');
      });
    },

    // 分区筛选
    filterArea(){
      this.newsListResault = this.newsList.filter(item=>item.area == this.areaList[this.oldArea]).reverse();

      this.imgRunner = this.newsListResault.slice(0,5);

      this.otherList = this.newsList.filter(item=>this.newsListResault.indexOf(item)==-1).slice(0,10);

      this.p = Math.ceil(this.newsListResault.length / 5);
      this.pArr.length = this.p;
    },

    // 浏览次数排序
    readNumSort(){
      this.newsTopList = this.newsListResault.concat().sort(valueSortBy("readNum","title")).reverse().slice(0,8);
    },

    // 轮播定时器
    myRunner(time) {
      clearInterval(this.runner);
      this.runner = setInterval(() => {
        this.lastNextRunnerClick(true);
      }, time);
    },

    // 上一张下一张
    lastNextRunnerClick(boolean){
      if(this.runnerSwitch){
        this.runnerSwitch = false;
        if(boolean){
          if (this.runnerIndex == this.imgRunner.length - 1) {
            this.runnerIndex = 0;
          } else {
            this.runnerIndex += 1;
          }
        }else{
          if (this.runnerIndex == 0) {
            this.runnerIndex = this.imgRunner.length - 1;
          } else {
            this.runnerIndex -= 1;
          }
        }
        setTimeout(()=>{this.runnerSwitch=true},1000);
      }
    },

    // 触碰轮播图 监听
    runnerhover(){
      $('.imgRunner').hover(()=>{
        clearInterval(this.runner)
      },()=>{
        this.myRunner(4000);
      });
    },
    // 触碰分区 监听
    areahover(){
      $('.menuLists .menuList').hover((e)=>{
        this.area = $(e.target).index();
      },()=>{
        this.area = this.oldArea;
      });
    },

    // 分图点击
    runnerClick(index) {
      this.runnerIndex = index;
    },
    // 换区点击
    changeAreaClick(index){
      this.oldArea = index;
      this.area = index;
      this.filterArea();
      this.readNumSort();
    },
    // 换页
    pageClick(index){
      this.page = index;
      scrollTo(0,600);
    },
    toIndexClick() {
      window.location.href = `/`
    },

    toNewInfoClick(_id) {
      window.open(`./newInfo?_id=${_id}`, '_blank');
    }
  },


  created() {
    this.readFile();
    // 专区
    $('#areaUrl').html(`{{areaList[oldArea]}}`)
    $('.menuLists').html(`<div :class="['menuList ', area==index?'active':'']" v-for="(item,index) in areaList"  @click="changeAreaClick(index)">{{item}}</div>`)
    // 轮播图
    $('.imgRunner .imgC').html(`<li v-for="(item,index) in imgRunner" :class="runnerIndex==index?'active':''" @click="toNewInfoClick(item._id)">
    <img :src="item.imgSrc" alt="">
    <span>{{item.title}}</span>
    </li>`);
    $('.imgRunner .imgBtn').html(`<li v-for="(item,index) in imgRunner" :class="runnerIndex==index?'active':''" @click="runnerClick(index)"></li>`);
    // 列表
    $('.newsItems').html(`<div :class="['newsItem',page==1? 'newNews':'']" v-for="item in newsListResault.slice(page*5-5,page*5)">
    <div class="newsItem_left">
      <div class="imgC" @click="toNewInfoClick(item._id)"><img :src="item.imgSrc" /></div>
    </div>
    <div class="newsItem_right">
      <div class="content">
        <div class="title" :title="item.title" @click="toNewInfoClick(item._id)">{{item.title}}</div>
        <div class="states">
        <span class="time">{{item.time}}</span>
         <span class="readNum">浏览  {{item.readNum}}</span>
        </div>
        <div class="mainContent">{{item.contentText}}</div>
      </div>
    </div>
  </div>`)
   // 排行
   $('.topNewLists').html(`<div v-for="(item,index) in newsTopList" class="topNewList">
   <div class="title" @click="toNewInfoClick(item._id)">
     <div class="topNum">{{index + 1}}</div>
     {{item.title}}
   </div>
     <span class="readNum"><span class="icon"></span>{{item.readNum}}<span>
   </div>`)
   // 其他
   $('.otherLists').html(`<div class="otherList" v-for="item in otherList">
    <div class="imgC" @click="toNewInfoClick(item._id)">
     <img :src="item.imgSrc" alt=""/>
    </div>
    <div class="content">
      <div class="title" @click="toNewInfoClick(item._id)">{{item.title}}</div>
      <div class="other">
       <span class="readNum">
         <span class="icon"></span>
         {{item.readNum}}
         <span class="time">{{item.time.slice(0,10)}}</span>
      </span>
    </div>
      
    </div>
   </div>`)
   // 分页
   $('.newsPages').html(`<span :class="['newPage',page==index+1?'active':'']" v-for="(item,index) in pArr" @click="pageClick(index+1)">{{index+1}}</span>`)
  },


  updated() {

  },

});